import React from 'react';
import './index.less'
import { Card,Skeleton } from 'antd';
import {withRouter} from "react-router-dom";

const { Meta } = Card;
function ShowItem(props){
    const {gid,gxsimg,gprice,gdesc,gtitle} = props.data
    const [isLoading,setLoad] = React.useState(true);
    React.useEffect(() => {
        const timer = setTimeout(() => {
            setLoad(isLoading => !isLoading)
        },1500)
        return () => {
            clearTimeout(timer)
        }
    },[])
    //点击跳转到详情页面
    function goDetail(){
        props.history.push(`/detail?gid=${gid}`)
    }
    return (
        <Skeleton loading={isLoading} active={true}>
        <Card
            onClick={goDetail}
            className='ShowCard'
            style={{ width: 200 }}
            cover={
                <img
                    alt="goods"
                    src={gxsimg}
                    className='ShowImg'
                />
            }
        >
            <Meta
                title={(<div className='ShowTitle'>{gtitle}</div>)}
                description={
                    (
                        <div>
                            <div className='ShowDesc'>{gdesc}</div>
                            <div className='ShowPrice'>￥{gprice}</div>
                        </div>
                    )
                }
            />
        </Card>
        </Skeleton>
    )
}
export default withRouter(ShowItem)
